
import React, { Component } from 'react';
import {Tabs ,Badge,Button} from 'antd-mobile'
import TicketList from './TicketList'
import { connect } from 'react-redux';

function mapStateToProps(state) {
    return {
      ...state
    };
}

function mapDispatchToProps(dispatch) {
    return {
      searchTicket(data){
          dispatch({type:"SEARCH_TICKET",data:data})
      }
    };
}

class TrainTicket extends Component {
    state={
        select:"from", //选择城市   默认为出发城市
        from:'上海', // 出发城市
        to:'北京', // 目的地称城市
        open:false  // 城市选择弹框是否显示
    }
    render() {
        const tabs = [
            { title: <Badge>单程</Badge> },
            { title: <Badge >往返</Badge> }
         
        ];

        let {from,to,open}=this.state;
        return (
            <div id="trainticket">
            
                 <Tabs tabs={tabs}
                        initialPage={0}
                        onChange={(tab, index) => { console.log('onChange', index, tab);
                        // 每次单程、返程切换时，隐藏城市选择弹框
                        this.setState({open:false})
                    }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                        <div >
                            

                            <div>
                               <span onClick={()=>{
                                   this.setState({open:true,select:"from"})
                               }}>从：{from?from:"不限"}</span> <span onClick={()=>{
                                   let fromCity=from;
                                   this.setState({from:to});
                                   this.setState({to:fromCity});

                               }}>切换</span> <span onClick={()=>{
                                   this.setState({open:true,select:"to"})
                               }}>到：{to?to:"不限"}</span>
                            </div>
                            <div>
                                日历选择
                            </div>
                            <div>
                                <Button onClick={
                                   ()=>{
                                       this.props.searchTicket({from:this.state.from,to:this.state.to})
                                   }
                                }>查询</Button>
                            </div>

                            <div>
                                <TicketList></TicketList>
                            </div>
                         </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                          往返
                          </div>
                     
                    </Tabs>

                    <div className={open?"cityModel":"hidden"}>
                        <div className="cityList"> 
                        <ul>
                            <li onClick={()=>{
                                   this.setState({open:false});

                                   if(this.state.select==='from'){
                                       this.setState({from:""});
                                   }else{
                                       this.setState({to:""});
                                   }
                            }}>不限</li>
                            { this.props.city_list.map((v,i)=>{
                                return <li key={i} onClick={()=>{
                                    this.setState({open:false});

                                    if(this.state.select==='from'){
                                        this.setState({from:v.city});
                                    }else{
                                        this.setState({to:v.city});
                                    }
                                
                                }}>{v.city}</li>
                            })}
                        </ul>
                        </div>
                       
                    </div>

            </div>
        );
    }
}

export default connect(
    mapStateToProps,mapDispatchToProps
)(TrainTicket);




